<template>
  <view class="container">
    <!-- 顶部导航 -->
    <uni-nav-bar :title="currentStep === steps.length ? '测评结果' : '健康测评'" left-icon="back"
      @clickLeft="back"></uni-nav-bar>

    <!-- 进度条 -->
    <view class="progress-bar" v-if="currentStep < steps.length">
      <view class="progress-track">
        <view class="progress-fill" :style="{ width: (currentStep / steps.length) * 100 + '%' }"></view>
      </view>
      <view class="progress-text">
        第 {{ currentStep }}/{{ steps.length }} 步
        <text class="current-score">当前累计得分: {{ currentTotalScore }}分</text>
      </view>
    </view>

    <!-- 测评内容区 -->
    <view class="assessment-content">
      <!-- 问题步骤 -->
      <view v-if="currentStep < steps.length">
        <view class="question-card">
          <text class="question-text">{{ currentQuestion.text }}</text>

          <view class="options">
            <view v-for="(option, index) in currentQuestion.options" :key="index" class="option-item"
              :class="{ selected: selectedOption === index }" @click="selectOption(index)">
              <view class="option-radio" :class="{ checked: selectedOption === index }">
                <view class="radio-dot" v-if="selectedOption === index"></view>
              </view>
              <text class="option-text">{{ option.text }}</text>
              <text class="option-score" v-if="selectedOption === index">+{{ option.score }}分</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 结果展示 -->
      <view v-else>
        <view class="result-card">
          <view class="result-header" :class="resultLevelClass">
            <text class="result-title">{{ assessmentResult.title }}</text>
            <text class="result-score">健康得分：{{ currentTotalScore }}分</text>
          </view>



          <!-- 分数详情区域 -->
          <view class="score-details">
            <text class="details-title">分数详情</text>
            <view class="detail-item" v-for="(detail, index) in scoreDetails" :key="index">
              <text class="detail-question">{{ detail.question }}</text>
              <text class="detail-score">{{ detail.score }}分</text>
            </view>
            <view class="total-score">
              <text>总分：{{ currentTotalScore }}分</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons" v-if="currentStep < steps.length">
      <button class="prev-btn" @click="prevStep" :disabled="currentStep === 1">
        上一步
      </button>
      <button class="next-btn" @click="nextStep" :disabled="selectedOption === null">
        {{ currentStep === steps.length ? '查看结果' : '下一步' }}
      </button>
    </view>

    <view class="restart-button" v-if="currentStep === steps.length">
      <button class="restart-btn" @click="restartAssessment">
        重新测评
      </button>
      <button class="share-btn" @click="shareResult">
        <uni-icons type="share" size="24" color="#fff"></uni-icons>
        分享结果
      </button>
    </view>
  </view>
</template>

<script>
import api from "@/api/index";
export default {
  data() {
    return {
      // 当前步骤（从1开始）
      currentStep: 1,
      // 选中的选项索引
      selectedOption: null,
      // 存储所有答案
      answers: [],
      // 存储每题得分
      questionScores: [],
      // 存储各题得分详情
      scoreDetails: [],
      // 当前累计得分
      currentTotalScore: 0,

      // 测评问题
      steps: [],

      // 测评结果
      assessmentResult: {
        title: "",
        analysis: "",
        suggestions: []
      }
    };
  },

  computed: {
    // 当前问题
    currentQuestion() {
      return this.steps[this.currentStep - 1];
    },

    // 结果等级样式类 - 修复：使用currentTotalScore替代不存在的assessmentResult.score
    resultLevelClass() {
      if (this.currentTotalScore >= 90) {
        return "excellent";
      } else if (this.currentTotalScore >= 70) {
        return "good";
      } else if (this.currentTotalScore >= 50) {
        return "fair";
      } else {
        return "poor";
      }
    },

  },

  methods: {
    // 选择选项 - 实时获取分数并计算
    selectOption(index) {
      // 记录之前选择的分数（如果有）
      const previousScore = this.questionScores[this.currentStep - 1] || 0;
      // 更新选择的选项
      this.selectedOption = index;
      // 获取当前选项的分数
      const selectedScore = this.currentQuestion.options[index].score;
      // 保存当前题目的分数
      this.questionScores[this.currentStep - 1] = selectedScore;
      // 计算总分：减去之前的分数，加上新的分数
      this.currentTotalScore = this.currentTotalScore - previousScore + selectedScore;
      console.log(`选择了第${index + 1}个选项，得分为${selectedScore}分，当前累计得分: ${this.currentTotalScore}分`);
    },

    // 下一步
    nextStep() {
      if (this.selectedOption === null) return;
      // 保存当前答案
      this.answers[this.currentStep - 1] = this.selectedOption;
      // 如果是最后一步，计算结果
      if (this.currentStep === this.steps.length) {
        this.calculateResult();
      } else {
        // 进入下一步
        this.currentStep++;
        this.selectedOption = this.answers[this.currentStep - 1] !== undefined ? this.answers[this.currentStep - 1] : null;
      }
    },

    // 新增：计算结果详情方法
    calculateResult() {
      // 重置分数详情
      this.scoreDetails = [];
      // 收集每题得分详情
      this.steps.forEach((step, index) => {
        const selectedIndex = this.answers[index];
        const questionScore = step.options[selectedIndex].score;
        this.scoreDetails.push({
          question: step.text,
          score: questionScore
        });
      });
      // 设置结果内容
      this.setResultContent(this.currentTotalScore);
    },

    // 上一步
    prevStep() {
      if (this.currentStep > 1) {
        // 保存当前步的选择
        this.answers[this.currentStep - 1] = this.selectedOption;
        // 进入上一步
        this.currentStep--;
        this.selectedOption = this.answers[this.currentStep - 1] !== undefined ? this.answers[this.currentStep - 1] : null;
      }
    },



    // 重新测评
    restartAssessment() {
      this.currentStep = 1;
      this.selectedOption = null;
      this.answers = [];
      this.questionScores = [];
      this.scoreDetails = [];
      this.currentTotalScore = 0;
      this.assessmentResult = {
        title: "",
        analysis: "",
        suggestions: []
      };
    },



    // 分享结果
    shareResult() {
      uni.showToast({
        title: '分享功能已触发',
        icon: 'none'
      });
    },

    // 返回上一页
    back() {
      if (this.currentStep > 1) {
        this.prevStep();
      } else {
        uni.navigateBack();
      }
    },
    //获取数据
    async gethealthtest(){
      const res = await api.getHealthTestApi()
      console.log('11111',res);
      this.steps = res.data
    }
  },
  onLoad() {
    this.gethealthtest()
  }
};
</script>

<style lang="scss" scoped>
/* 样式保持不变，新增以下样式 */
.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .current-score {
    color: #007aff;
    font-weight: 500;
  }
}

.option-item {
  position: relative;

  .option-score {
    position: absolute;
    right: 25rpx;
    color: #00b42a;
    font-weight: 500;
  }
}

/* 原有样式保持不变 */
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

// 进度条
.progress-bar {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .progress-track {
    height: 10rpx;
    background-color: #eee;
    border-radius: 5rpx;
    overflow: hidden;

    .progress-fill {
      height: 100%;
      background-color: #007aff;
      transition: width 0.3s ease;
    }
  }
}

// 测评内容区
.assessment-content {
  padding: 0 20rpx 200rpx;
}

// 问题卡片
.question-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .question-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 30rpx;
    display: block;
    line-height: 1.5;
  }

  .options {
    display: flex;
    flex-direction: column;
    gap: 15rpx;
  }

  .option-item {
    display: flex;
    align-items: center;
    padding: 20rpx 25rpx;
    border-radius: 8rpx;
    border: 1rpx solid #eee;
    background-color: #fff;
    transition: all 0.2s;

    &.selected {
      border-color: #007aff;
      background-color: #f0f7ff;
    }

    .option-radio {
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      border: 2rpx solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      &.checked {
        border-color: #007aff;
        background-color: #007aff;
      }
    }

    .radio-dot {
      width: 18rpx;
      height: 18rpx;
      border-radius: 50%;
      background-color: #fff;
    }

    .option-text {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
  }
}

// 结果卡片和其他样式保持不变
.result-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .result-header {
    padding: 25rpx;
    border-radius: 8rpx;
    margin-bottom: 30rpx;
    text-align: center;

    &.excellent {
      background-color: #e5f5ea;
    }

    &.good {
      background-color: #e8f4fd;
    }

    &.fair {
      background-color: #fff8e6;
    }

    &.poor {
      background-color: #fee;
    }

    .result-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: block;
    }

    .result-score {
      font-size: 28rpx;
    }

    .excellent .result-title {
      color: #00b42a;
    }

    .good .result-title {
      color: #007aff;
    }

    .fair .result-title {
      color: #ff7d00;
    }

    .poor .result-title {
      color: #f53f3f;
    }

    .excellent .result-score {
      color: #008000;
    }

    .good .result-score {
      color: #0066cc;
    }

    .fair .result-score {
      color: #e67300;
    }

    .poor .result-score {
      color: #cc0000;
    }
  }

  .result-analysis,
  .health-suggestions,
  .score-details {
    margin-bottom: 30rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .analysis-title,
    .suggestions-title,
    .details-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 15rpx;
      display: block;
      padding-left: 5rpx;
      border-left: 4rpx solid #007aff;
    }

    .analysis-content {
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      text-align: justify;
    }

    .suggestion-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .suggestion-icon {
        margin-right: 15rpx;
        margin-top: 5rpx;
        flex-shrink: 0;
      }

      .suggestion-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        flex: 1;
      }
    }

    .detail-item {
      display: flex;
      justify-content: space-between;
      padding: 12rpx 0;
      border-bottom: 1rpx dashed #eee;

      &:last-child {
        border-bottom: none;
      }

      .detail-question {
        font-size: 24rpx;
        color: #666;
        flex: 1;
        line-height: 1.5;
      }

      .detail-score {
        font-size: 24rpx;
        color: #007aff;
        font-weight: 500;
        margin-left: 15rpx;
        min-width: 60rpx;
        text-align: right;
      }
    }

    .total-score {
      margin-top: 15rpx;
      padding-top: 15rpx;
      border-top: 1rpx solid #eee;
      text-align: right;
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.action-buttons {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  gap: 20rpx;

  .prev-btn,
  .next-btn {
    flex: 1;
    padding: 25rpx 0;
    border-radius: 50rpx;
    font-size: 30rpx;
    font-weight: 500;
  }

  .prev-btn {
    background-color: #f5f5f5;
    color: #333;
    border: 1rpx solid #ddd;

    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .next-btn {
    background-color: #007aff;
    color: #fff;

    &:disabled {
      background-color: #ccc;
      pointer-events: none;
    }
  }
}

.restart-button {
  position: fixed;
  bottom: 30rpx;
  left: 30rpx;
  right: 30rpx;
  display: flex;
  gap: 15rpx;

  .save-btn,
  .restart-btn,
  .share-btn {
    flex: 1;
    padding: 25rpx 0;
    border-radius: 50rpx;
    font-size: 28rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .save-btn {
    background-color: #00b42a;
    color: #fff;
  }

  .restart-btn {
    background-color: #f5f5f5;
    color: #333;
    border: 1rpx solid #ddd;
  }

  .share-btn {
    background-color: #007aff;
    color: #fff;
  }
}
</style>
